<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/metro-bootstrap/3.1.1.2/css/metro-bootstrap.min.css"/>
		<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.css">
		<script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>
		<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
		<title>metro-bootstrap使用测试</title>
		<script type="text/javascript">
			$(function(){
			});
		</script>
	</head>
	<body>
		
		<nav class="navbar navbar-default" role="navigation">
		  <!-- Brand and toggle get grouped for better mobile display -->
		  <div class="navbar-header">
		    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
		      <span class="sr-only">Toggle navigation</span>
		      <span class="icon-bar"></span>
		      <span class="icon-bar"></span>
		      <span class="icon-bar"></span>
		    </button>
		    <a class="navbar-brand" href="#">Brand</a>
		  </div>
		
		  <!-- Collect the nav links, forms, and other content for toggling -->
		  <div class="collapse navbar-collapse navbar-ex1-collapse">
		    <ul class="nav navbar-nav">
		      <li class="active"><a href="#">Link</a></li>
		      <li><a href="#">Link</a></li>
		      <li class="dropdown">
		        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
		        <ul class="dropdown-menu">
		          <li><a href="#">Action</a></li>
		          <li><a href="#">Another action</a></li>
		          <li><a href="#">Something else here</a></li>
		          <li><a href="#">Separated link</a></li>
		          <li><a href="#">One more separated link</a></li>
		        </ul>
		      </li>
		    </ul>
		    <form class="navbar-form navbar-left" role="search">
		      <div class="form-group">
		        <input type="text" class="form-control" placeholder="Search">
		      </div>
		      <button type="submit" class="btn btn-default">Submit</button>
		    </form>
		    <ul class="nav navbar-nav navbar-right">
		      <li><a href="#">Link</a></li>
		      <li class="dropdown">
		        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
		        <ul class="dropdown-menu">
		          <li><a href="#">Action</a></li>
		          <li><a href="#">Another action</a></li>
		          <li><a href="#">Something else here</a></li>
		          <li><a href="#">Separated link</a></li>
		        </ul>
		      </li>
		    </ul>
		  </div><!-- /.navbar-collapse -->
		</nav>
		
		<div class="container">
			<!--
            	作者：opev@foxmail.com
            	时间：2015-01-18
            	描述：tile简单使用
            -->
			<div class="row">
				<div class="col-sm-6 col-md-4">
				<div class="thumbnail tile tile-large tile-teal">
					<a href="tiles_demo.html" >
						<h1>查看tile演示</h1>
						<i class="fa fa-3x fa-arrow-circle-o-up"></i>
						</a>
					</div>
				</div>
				<div class="col-sm-6 col-md-4">
					<div class="thumbnail tile tile-large">
						<a href="#" >
							<img src="images/twittertile.png">
							<h2>
							Twitter
							<i class="fa fa-3x fa-angle-right"></i>
							</h2>
						</a>
					</div>
				</div>
				<div class="col-sm-6 col-md-4">
					<div class="thumbnail tile tile-large tile-yellow">
						<a href="#" >
							<img src="images/twittertile.png">
							<h2>
							Tweet
							<i class="fa fa-3x fa-rss-square"></i>
							</h2>
						</a>
					</div>
				</div>
			</div>
			
			<div class="row">
				<div class="col-md-6">
					<div class="btn-group">
					  <button type="button" class="btn btn-default">Left</button>
					  <button type="button" class="btn btn-default">Middle</button>
					  <button type="button" class="btn btn-default">Right</button>
					</div>
					<br />
					<div class="btn-group btn-group-justified">
				        <a href="#" class="btn btn-primary">Left</a>
				        <a href="#" class="btn btn-default">Middle</a>
				        <a href="#" class="btn btn-danger">Right</a>
				        <a href="#" class="btn btn-warning">Right</a>
				    </div>
				    <br />
				    
				    button下拉框
				    <div class="btn-group">
					  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					    Action <span class="caret"></span>
					  </button>
					  <ul class="dropdown-menu" role="menu">
					    <li><a href="#">Action</a></li>
					    <li><a href="#">Another action</a></li>
					    <li><a href="#">Something else here</a></li>
					    <li class="divider"></li>
					    <li><a href="#">Separated link</a></li>
					  </ul>
					</div>
					<br />
					navs
					<ul id="navtt" class="nav nav-tabs">
					  <li class="active"><a href="#n1" data-toggle="tab">Home</a></li>
					  <li><a href="#n2" data-toggle="tab">Profile</a></li>
					  <li><a href="#n3" data-toggle="tab">Messages</a></li>
					</ul>
					
					<ul class="nav nav-pills">
					  <li class="active"><a href="#n1" data-toggle="tab">Home</a></li>
					  <li><a href="#n2" data-toggle="tab">Profile</a></li>
					  <li><a href="#n3" data-toggle="tab">Messages</a></li>
					</ul>
					<div class="row tab-content">
						<div id="n1" class="col-md-4 tab-pane">内容1</div>
						<div id="n2" class="col-md-4 tab-pane">内容2</div>
						<div id="n3" class="col-md-4 tab-pane">内容3</div>
					</div>
					<br />
					分页器
					<ul class="pagination">
					  <li><a href="#">&laquo;</a></li>
					  <li><a href="#">1</a></li>
					  <li><a href="#">2</a></li>
					  <li><a href="#">3</a></li>
					  <li><a href="#">4</a></li>
					  <li><a href="#">5</a></li>
					  <li><a href="#">&raquo;</a></li>
					</ul>
					
				</div>
				<div class="col-md-6">
					<div class="input-group">
					  <span class="input-group-addon">@</span>
					  <input type="text" class="form-control" placeholder="Username">
					</div>
					
					输入框
					<div class="input-group">
					  <input type="text" class="form-control">
					  <span class="input-group-addon">.00</span>
					</div>
					
					<div class="input-group">
					  <span class="input-group-addon">$</span>
					  <input type="text" class="form-control">
					  <span class="input-group-addon">.00</span>
					</div>
					<br />
					checkbox
					<label class="control checkbox">
					   <input type="checkbox">
					   <span class="checkbox-label"> CheckBox</span>
					</label>
					<label class="control radio">
					  <input type="radio" name="radio">
					  <span class="radio-label"> Radio</span>
					</label>
					<br />
					
					<div class="row">
					  <div class="col-lg-6">
					    <div class="input-group">
					      <span class="input-group-btn">
					        <button class="btn btn-default" type="button">Go!</button>
					      </span>
					      <input type="text" class="form-control">
					    </div><!-- /input-group -->
					  </div><!-- /.col-lg-6 -->
					  <div class="col-lg-6">
					    <div class="input-group">
					      <input type="text" class="form-control">
					      <span class="input-group-btn">
					        <button class="btn btn-default" type="button">Go!</button>
					      </span>
					    </div><!-- /input-group -->
					  </div><!-- /.col-lg-6 -->
					</div><!-- /.row -->
					<br />
					<div class="row">
					  <div class="col-lg-6">
					    <div class="input-group">
					      <div class="input-group-btn">
					        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
					        <ul class="dropdown-menu">
					          <li><a href="#">Action</a></li>
					          <li><a href="#">Another action</a></li>
					          <li><a href="#">Something else here</a></li>
					          <li class="divider"></li>
					          <li><a href="#">Separated link</a></li>
					        </ul>
					      </div><!-- /btn-group -->
					      <input type="text" class="form-control">
					    </div><!-- /input-group -->
					  </div><!-- /.col-lg-6 -->
					  <div class="col-lg-6">
					    <div class="input-group">
					      <input type="text" class="form-control">
					      <div class="input-group-btn">
					        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
					        <ul class="dropdown-menu pull-right">
					          <li><a href="#">Action</a></li>
					          <li><a href="#">Another action</a></li>
					          <li><a href="#">Something else here</a></li>
					          <li class="divider"></li>
					          <li><a href="#">Separated link</a></li>
					        </ul>
					      </div><!-- /btn-group -->
					    </div><!-- /input-group -->
					  </div><!-- /.col-lg-6 -->
					</div><!-- /.row -->
					<br />
					标签
					<span class="label label-default">Default</span>
					<span class="label label-primary">Primary</span>
					<span class="label label-success">Success</span>
					<span class="label label-info">Info</span>
					<span class="label label-warning">Warning</span>
					<span class="label label-danger">Danger</span>
					bdges:
					<a href="#">Inbox <span class="badge">42</span></a>
				</div>
			</div>	
			
			<div class="row">
				<div class="col-md-12">
					<div class="jumbotron">
					  <h1>Hello, world!</h1>
					  <p>...</p>
					  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
					</div>
					<div class="alert alert-success">...</div>
					<div class="alert alert-info">...</div>
					<div class="alert alert-warning">...</div>
					<div class="alert alert-danger">...</div>
					<br />
					<div class="row">
						<div class="col-md-6">
							<ul class="list-group">
							  <li class="list-group-item">Cras justo odio</li>
							  <li class="list-group-item">Dapibus ac facilisis in</li>
							  <li class="list-group-item">Morbi leo risus</li>
							  <li class="list-group-item">Porta ac consectetur ac</li>
							  <li class="list-group-item">Vestibulum at eros</li>
							</ul>
						</div>
						<div class="col-md-6">
							<div class="list-group">
							  <a href="#" class="list-group-item active">
							    Cras justo odio<span class="badge">1</span>
							  </a>
							  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
							  <a href="#" class="list-group-item">Morbi leo risus</a>
							  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
							  <a href="#" class="list-group-item">Vestibulum at eros</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="bs-example">
		      <div class="panel panel-primary">
		        <div class="panel-heading">
		          <h3 class="panel-title">Panel title</h3>
		        </div>
		        <div class="panel-body">
		          Panel content
		        </div>
		      </div>
		      <div class="panel panel-success">
		        <div class="panel-heading">
		          <h3 class="panel-title">Panel title</h3>
		        </div>
		        <div class="panel-body">
		          Panel content
		        </div>
		      </div>
		      <div class="panel panel-info">
		        <div class="panel-heading">
		          <h3 class="panel-title">Panel title</h3>
		        </div>
		        <div class="panel-body">
		          Panel content
		        </div>
		      </div>
		      <div class="panel panel-warning">
		        <div class="panel-heading">
		          <h3 class="panel-title">Panel title</h3>
		        </div>
		        <div class="panel-body">
		          Panel content
		        </div>
		      </div>
		      <div class="panel panel-danger">
		        <div class="panel-heading">
		          <h3 class="panel-title">Panel title</h3>
		        </div>
		        <div class="panel-body">
		          Panel content
		        </div>
		      </div>
		    </div>
		    <br />
		</div>
	</body>
</html>
